import React, { useState, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Button, Form, Select, Radio } from 'antd'
import AddProductTable from './AddProductTable'

import { getRuleList } from '@/reducer/product'

import { ISpecification, IRuleValue, IProductState } from '@/types/product'
import { IOptions } from '@/types/global'

import getProductColumns from './getProductColumns'

interface IProps {
  specType: number
  specList: ISpecification[]
}

interface IState {
  productInfo: IProductState
}

export default function AddProductSpec(props: any) {
  // 单一规格或多规格
  const [specType, setSpecType] = useState<number>(0)
  // 是否展示动态表单
  const [showActiveForm, setShowActiveForm] = useState<boolean>(false)
  // 是否展示表格(多规格)
  const [showSpecTable, setShowSpecTable] = useState<boolean>(false)
  // react-redux提供的useDispatch
  const dispatch = useDispatch()
  // 函数组件不再需要使用connect了
  const ruleList = useSelector<IState, IOptions[]>(state => {
    return state.productInfo.ruleList.map(item => ({
      label: item.rule_name,
      value: item.id,
    }))
  })

  // 获取规格列表
  useEffect(() => {
    dispatch(getRuleList())
  }, [])
  console.log(props.specList)
  return (
    <>
      <Form.Item name="specSelect" label="商品规格" initialValue={specType}>
        {/* 手动进行规格切换 */}
        <Radio.Group onChange={({ target }) => setSpecType(target.value)}>
          <Radio value={0}>单规格</Radio>
          <Radio value={1}>多规格</Radio>
        </Radio.Group>
      </Form.Item>
      {specType === 0 ? (
        <AddProductTable columns={getProductColumns()} />
      ) : (
        <Form.Item className="spec-wrap" label="选择规格">
          <Select
            className="half"
            options={ruleList}
            placeholder="请选择规格"
            // onChange={(_, { list }) => setSpecs(list)}
          />
          {/* Form.Item中只要存在按钮，antd会提示你不允许往这个Item上添加name属性。
        表示这个Item会脱离表单域，自主处理，待提交的属性中也不会包含这个Item */}
          <Button type="primary" onClick={() => setShowSpecTable(true)}>
            确认
          </Button>
          <Button>添加规格</Button>
        </Form.Item>
      )}
    </>
  )
}
